<template>
  <!-- 最外层的容器 -->
  <view class="my-checkout-container">
    <!-- 全选区域 -->
    <label class="radio" @click="handleCheckedAll(isCheckedAll)">
      <radio color="#C00000" :checked="isCheckedAll" />
      <text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{ checkedAmount }}</text>
    </view>

    <!-- 结算按钮 -->
    <view class="btn-checkout" @click="checkout">结算({{ checkedTotal }})</view>
  </view>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      // 倒计时时间
      second: 3,
      timer: null,
    };
  },
  computed: {
    ...mapGetters("cart", ["checkedTotal", "total", "checkedAmount"]),
    ...mapGetters("user", ["fullAddress"]),
    ...mapState("user", ["token"]),
    // 是否全选
    isCheckedAll() {
      return this.checkedTotal === this.total;
    },
  },
  methods: {
    // 1. 处理全选和取消全选
    handleCheckedAll(flag) {
      // console.log(flag);
      this.$store.commit("cart/setCheckedAll", flag);
    },
    // 2. 订单结算
    checkout() {
      // 2.1 判断是否有勾选的商品
      if (this.checkedTotal === 0) return this.$msg("请勾选要结算的商品");
      // 2.2 判断是否有收货地址
      if (!this.fullAddress) return this.$msg("请添加收货地址");
      // 2.3 判断是否登录
      if (!this.token) {
        // 3秒后去登录
        return this.delayNavigate();
      }
      // 2.4 去支付
      this.payOrder();
    },
    // 3. 3秒后去登录
    delayNavigate() {
      // 3.1 重置倒计时
      this.second = 3;
      // 3.2 初始提示
      this.$msg(`未登录, ${this.second}s后去登录!`);
      // 3.3 开启定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        // 3.3.1 开始倒计时
        this.second--;
        // 3.3.2 判断
        if (this.second <= 0) {
          // 清除倒计时
          clearInterval(this.timer);

          // 把回跳的地址对象存储到vuex中
          this.$store.commit("user/setRedirectInfo", {
            url: "/pages/cart/cart",
            type: "tab",
          });

          // 跳转去我的页面
          uni.switchTab({
            url: "/pages/my/my",
          });
        } else {
          this.$msg(`未登录, ${this.second}s后去登录!`);
        }
      }, 1000);
    },
    // 4. 去支付
    async payOrder() {
      // 4.1 基于购物车中勾选商品去创建订单
      // 4.1.1 发送请求
      const { meta, message } = await this.$http.post("/my/orders/create", {
        // 开发期间不填写真实的订单价格，写死订单总价为1分钱
        order_price: 0.01,
        // 收获地址
        consignee_addr: this.fullAddress,
        // 购物车中选中的商品
        goods: this.$store.state.cart.cartItems
          .filter((x) => x.goods_state)
          .map((x) => ({
            goods_id: x.goods_id,
            goods_number: x.goods_count,
            goods_price: x.goods_price,
          })),
      });

      if (meta.status !== 200) {
        return this.$msg("创建订单失败！");
      }

      // 1.2 得到 “订单编号”
      const orderNumber = message.order_number;
      // console.log(message);

      // --------------------------------

      // 2. 订单预支付
      // 2.1 请求获取订单的支付信息
      const { meta: meta2, message: message2 } = await this.$http.post(
        "/my/orders/req_unifiedorder",
        {
          order_number: orderNumber,
        }
      );

      // 2.2 预付订单生成失败
      if (meta2.status !== 200) {
        return this.$msg("预付订单生成失败！");
      }

      // 2.3 得到订单支付相关的必要参数
      const payInfo = message2.pay;
      // console.log(message2);

      // -------------------------------------------
      // 3. 发起微信支付
      try {
        // 3.1 弹出微信支付界面
        await uni.requestPayment(payInfo);
        // 3.2 查询支付结果
        const { meta: meta3 } = await this.$http.post("/my/orders/chkOrder", {
          order_number: orderNumber,
        });

        if (meta3.status !== 200) {
          return this.$msg("订单支付失败！");
        }

        // 3.3 提示支付完成
        this.$msg("订单支付成功");

        // 3.4 跳转到我的订单页面
        uni.switchTab({
          url: "/pages/my/my",
        });
      } catch (error) {
        this.$msg("微信支付失败~");
      }
    },
  },
};
</script>

<style lang="scss">
.my-checkout-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10rpx;
  font-size: 28rpx;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-checkout {
    height: 100rpx;
    min-width: 200rpx;
    background-color: #c00000;
    color: white;
    line-height: 100rpx;
    text-align: center;
    padding: 0 20rpx;
  }
}
</style>